<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
  	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta content="B2B电商平台" name="description"/>
	<meta content="B2B电商平台" name="keyword"/>
	
	<title>B2B电商平台.店铺商品类型维护</title>
	<link rel="icon" href="include/images/icss.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="include/images/icss.ico" type="image/x-icon" />
	<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/global.css" />
	<link rel="stylesheet" type="text/css" href="<%=path %>/include/css/style.css" />
	<script type="text/javascript" src="<%=path %>/include/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="<%=path %>/include/js/cookies.js"></script>
	<script type="text/javascript" src="<%=path %>/include/js/icss.busin.js"></script>
	<script type="text/javascript" src="<%=path %>/include/js/icss.common.js"></script>
	
	<style type="text/css">
		.title_div{
			height: 70px;
			padding-top: 15px;
			text-align: center;
			border-bottom: 3px solid #e0e0e0;
		}
		.titleCss{
			height: 65px;
			width: 790px;
			margin: 0 auto;
			background: url('<%=path %>/images/postTrade/post_trade_one.png') no-repeat 0 0;
			background-size:100%;
		}
		.title_1{
			background-position: 0 -92px;
		}
		.title_2{
			background-position: 0 -200px;
		}
		.mainDiv{
			margin: 10px 56px;
		}
		.mainDiv1{
			height: 80px;
			margin: 0px auto 0px;
			background: #f5f5f5;
			overflow: hidden;
		}
		.mainDiv1 ul{
			width: 665px;
		    margin: 21px auto 0;
		    overflow: hidden
		}
		.mainDiv1 ul li{
			float: left;
		}
		.mainDiv ul li.txt{
			font-size: 14px;
    		line-height: 42px;
    		width: 70px;
		}
		.mainDiv ul li .inputbox{
			width: 500px;
			height: 40px;
			overflow: hidden;
			background-position: 0 -445px;
		}
		.mainDiv ul li button{
			width: 80px;
			height: 40px;
			background-position: 0 -172px;
			color: #fff;
			margin-left: 10px;
			font: 20px "Microsoft YaHei", "SimHei ";
		}
		.inputbox ,li button ,.mainDiv2 ul li a.libg,.sel_item_div_s,.nextDiv button{
			background: url('<%=path %>/images/postTrade/pic-global.png') no-repeat 0 0;
		}
		.mainDiv ul li .inputbox input{
			margin-top: 11px;
		    width: 470px;
		    padding: 3px 10px 0;
		    float: left;
		    border: none;
		    background: none;
		    color: #999;
		}
		.mainDiv2{
			height: 50px;
		    margin-top: 10px;
		    border-bottom: 1px solid #e0e0e0;
		}
		.mainDiv2 ul li{
			float: left;
		}
		.mainDiv2 ul li.item_1{
			background-position: 0 -321px;
		    bottom: -1px;
		    position: relative;
		    color: #d52c29;
		}
		a.libg{
			display: block;
    		text-align: center;
    		height: 50px;
    		width: 170px;
    	    color: #d52c29;
    	    font: 18px/50px "Microsoft YaHei", "SimHei ";
		}
		.main_contents{
			background: #f7f7f7;
			width:auto;
			border: 1px solid #e0e0e0;
			border-top: 0px;
			text-align: center;
		}
		.main_contents_div{
			width: 92%;
			padding-top: 10px;
			margin-left: 50px;
			height: 300px;
		}
		.main_contents_div_left{
			height: 283px;
			width: 30%;
			background: #fff;
			border: 1px solid #e0e0e0;
			float: left;
		}
		.div_box{
			position: absolute;
		    padding: 3px 0px 0px 3px;
		    background-color: #fff;
		    width: 20%;
		}
		.div_box_input,.li_pic{
			background: url('<%=path %>/images/postTrade/selico.png') no-repeat 0 0;
		}
		.div_box_input{
			border: 1px solid #c7c7c7;
		    height: 28px;
		    line-height: 28px;
		    width: 95%;
		    padding-left: 20px;
	    }
	    .div_item{
	    	height: 255px;
	    	overflow: auto;
	    	padding-top: 37px;
	    }
	    .div_item ul li{
	    	padding: 0px 10px;
	    }
	    .div_item ul li{
	    	text-align: left;
	    	font-size: 14px;
	    }
	    .sel_item_div{
		    line-height: 18px;
		    border: 1px solid #FFCD8B;
		    margin: 10px 0 0px;
		    font-size: 12px;
		    padding: 5px 0px;
		    background: #FFFAF2;
	    }
	    .sel_item_div_s{
	    	display: inline-block;
		    width: 11px;
		    height: 6px;
		    background-position: -482px -663px;
	    }
	    .nextDiv button{
	    	font: 20px "Microsoft YaHei", "SimHei ";
	    	line-height: 63px;
    		width: 279px;
    		color: #a8a8a8;
    		background-position: 0 -490px;
	    }
	    .nextDiv_button1{
    		background-position: 0 -375px;
    		color: #fff;
	    }
	    .subDiv{
	    	margin: 30px 0px 20px;
	    	height: 63px;
	    	text-align: center;
	    }
	    .nextDiv{
	    	width: 279px;
	    	height: 100%;
	    	margin: 0px auto;
	    }
	    .radioCss{
	    	height: 347px;
	    	overflow: auto;
	    	font-size: 14px;
	    }
	    .radioCss ul li{
	    	padding: 8px 45px;
	    }
	    .radioCss ul li input{
	    	margin-top: -4px;
	    }
	</style>
	<script type="text/javascript">
	  $(document).ready(function(){
	  	_reHeight("rightFrame","contentDiv");
		  _queryItem();
		  
		
	  });

		function _queryItem(){//第一div类目
			_hideDiv(2);
			$("#ulH").empty();
			var itemName = $("#item1").val();
			$.ajax({
				type:"post",
				url:'<%=path%>/postTrade/getCategoryList.do',
				dataType:"json",
				data:{level:'1',itemName:itemName},
				success:function(data){
					if(data){
						var dataList = data.list;
						var html = "";
						for(var i=0;i<dataList.length;i++){
							var cnt = dataList[i];
							if(dataList[i].CNT>0){
								html += "<li id=\"li"+dataList[i].CATEGORY_CODE+"\" style=\"line-height: 27px;height: 27px;\" onclick=\"_clickItem('"+dataList[i].CATEGORY_CODE+"','"+dataList[i].CATEGORY_NAME+"',2,1);_checkBackColor('ulH','"+dataList[i].CATEGORY_CODE+"')\">";
								html += "	<div style=\"height:27px;width:93%;float:left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\">"+dataList[i].CATEGORY_NAME+"</div>";
								html += "	<div style=\"background-position: right -55px;width:7px;height:27px;float:left;\" class=\"li_pic\"></div>";
								html += "</li>";
							}else{
								html += "<li id=\"li"+dataList[i].CATEGORY_CODE+"\" style=\"line-height: 27px;height: 27px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\" onclick=\"_changeDivCol('"+dataList[i].CATEGORY_CODE+"','"+dataList[i].CATEGORY_NAME+"',2,0);_checkBackColor('ulH','"+dataList[i].CATEGORY_CODE+"')\" >"+dataList[i].itemName+"</li>";
							}
						}
						$("#ulH").append(html);
						var h = $("#ulH").height();
					    if(h>265){
						    $("#item1").css("width","93%");
					    }
					}
				},
				error : function() {
				}
			  });
		}

		function _clickItem(code,name,level,flag){//第二div类目
			_changeDivCol(code,name,level,flag);
			$("#contents"+level).css("display","");
			var itemName = $("#item"+level).val();
			$("#ulH"+level).empty();
			var divNum = parseInt(level)+1;
			$.ajax({
				type:"post",
				url:'<%=path%>/postTrade/getCategoryList.do',
				dataType:"json",
				data:{level:level,itemCode:code,itemName:itemName},
				success:function(data){
					if(data){
						var dataList = data.list;
						var html = "";
						for(var i=0;i<dataList.length;i++){
							if(dataList[i].CNT>0){
								html += "<li id=\"li"+dataList[i].CATEGORY_CODE+"\" style=\"line-height: 27px;height: 27px;\" onclick=\"_clickItem('"+dataList[i].CATEGORY_CODE+"','"+dataList[i].CATEGORY_NAME+"',"+divNum+",1);_checkBackColor('ulH"+level+"','"+dataList[i].CATEGORY_CODE+"')\" >";
								html += "	<div style=\"height:27px;width:93%;float:left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\">"+dataList[i].CATEGORY_NAME+"</div>";
								html += "	<div style=\"background-position: right -55px;width:7px;height:27px;float:left;\" class=\"li_pic\"></div>";
								html += "</li>";
							}else{
								html += "<li id=\"li"+dataList[i].CATEGORY_CODE+"\" style=\"line-height: 27px;height: 27px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\" onclick=\"_changeDivCol('"+dataList[i].CATEGORY_CODE+"','"+dataList[i].CATEGORY_NAME+"',"+divNum+",0);_checkBackColor('ulH"+level+"','"+dataList[i].CATEGORY_CODE+"')\" >"+dataList[i].CATEGORY_NAME+"</li>";
							}
						}
						$("#ulH"+level).append(html);
						var h = $("#ulH"+level).height();
						if(h>265){
							$("#item"+level).css("width","93%");
						}
					}
				},
				error : function() {
				}
			  });
			  if(level==4){
				  $(".main_contents_div").css("height","680px");
				  _reHeight("rightFrame","contentDiv");
			  }
			  $("#itemCode"+level).val(code);
		}

		function _cliItem(level){
			var code = $("#itemCode"+level).val();
			var name = $("#item"+level).val();
			_clickItem(code,name,level);
		}

		function _hideDiv(num){//选择前一类目查询，之后的都隐藏
			for(var i=num;i<6;i++){
				$("#contents"+i).css("display","none");
			}
		}
		var CLICK_ARR = new Array();
		function _changeDivCol(code,name,level,flag){//您当前选择的是的结果
			_hideDiv(level);
			CLICK_ARR[level-2] = name;
			$("#itemCode").val(code);
			var html = "";
			var categoryName = "";
			CLICK_ARR.splice(level-1,CLICK_ARR.length);
			for(var i=0;i<CLICK_ARR.length;i++){
				html += CLICK_ARR[i];
				categoryName += CLICK_ARR[i];
				if(i<CLICK_ARR.length-1){
					 html += "&nbsp;>&nbsp;";
					 categoryName += ",";
				}
			}
			if(flag==1){
				html += "&nbsp;>&nbsp;...";
				$(".nextDiv button").css("background-position","0 -490px");
				$(".nextDiv button").css("color","#a8a8a8");
				nextNum=0;
			}else{
				$(".nextDiv button").css("background-position","0 -375px");
				$(".nextDiv button").css("color","#fff");
				nextNum=1;
			}
			$("#categoryName").val(categoryName);
			$("#spanVal").empty();
			$("#spanVal").append(html);
		}

		function _query(){//查找类目搜索结果
			nextNum = 0;
			$(".tem1").css("display","none");
			$(".tem2").css("display","");
			var itemName = $("#queryVal").val();
			$(".nextDiv button").css("background-position","0 -490px");
			$(".nextDiv button").css("color","#a8a8a8");
			$("#ulRadio").empty();
			$.ajax({
				type:"post",
				url:'<%=path%>/postTrade/queryCategoryList.do',
				dataType:"json",
				data:{itemName:itemName},
				success:function(data){
					if(data){
						var dataList = data.list;
						var html = "";
						$("#itemCode").val(dataList[0].CATEGORY_CODE);
						for(var i=0;i<dataList.length;i++){
							if(i==0){
								html += "<li id='"+dataList[i].CATEGORY_CODE+"'><input id='rdo"+dataList[i].CATEGORY_CODE+"' type=\"radio\" name=\"liRadio\" /><label>&nbsp;<em id='li"+dataList[i].CATEGORY_CODE+"'>"+dataList[i].itemName+"</em> </label></li>";
							}else
								html += "<li id='"+dataList[i].CATEGORY_CODE+"'><input id='rdo"+dataList[i].CATEGORY_CODE+"' type=\"radio\" name=\"liRadio\" /><label>&nbsp;<em id='li"+dataList[i].CATEGORY_CODE+"'>"+dataList[i].itemName+"</em> </label></li>";
						}
						$("#ulRadio").append(html);
					}
				},
				error : function() {
				}
			  });
			  $(".radioCss ul").on('click','li',function(){
				  _changeDivCol1(this.id);
			  });
		}

		function _changeDivCol1(id){
			var val = $("#li"+id).text().replace(">",",");
			$("#rdo"+id).attr("checked","checked");
			$("#categoryName").val(val);
			$("#itemCode").val(id);
			$(".nextDiv button").css("background-position","0 -375px");
			$(".nextDiv button").css("color","#fff");
			nextNum=1;
		}

		function _backList(){//搜索结果页面，返回选择类目页面
			$(".tem1").css("display","");
			$(".tem2").css("display","none");
			_queryItem();
		}

		var nextNum = 0;
		function _nextPage(){//下一步
			if(nextNum==0) return;
			var itemCode = $("#itemCode").val();
			var categoryName = $("#categoryName").val();
			window.location.href = "<%=path %>/postTrade/toPostTradeTwoPage.do?itemCode="+itemCode+"&itemName="+escape(escape(categoryName));
		}

		function _checkBackColor(ulId,liId){
			$("#"+ulId+" li").css("background","#fff");
			$("#li"+liId).css("background","#eee");
		}
  	</script>
	
  </head>
  
  <body>
  <div id="contentDiv">
  <div style="width: 99.3%;">
   	<div class="title_div">
   		<div class="titleCss title_1"></div>
   	</div>
   	<div class="mainDiv">
   		<div class="mainDiv1">
   			<ul>
   				<li class="txt" style="white-space: nowrap;">查找类目：</li>
   				<li style="width:75%;">
   					<div class="inputbox" style="width:100%;">
   						<input id="queryVal" name="queryVal" placeholder="输入商品名称，系统自动为您推荐分类"/>
   					</div>
   				</li>
   				<li>
   					<button onclick="_query()">搜索</button>
   					<input type="hidden" id="itemCode" name="itemCode">
   					<input type="hidden" id="itemCode2" name="itemCode2">
   					<input type="hidden" id="itemCode3" name="itemCode3">
   					<input type="hidden" id="itemCode4" name="itemCode4">
   					<input type="hidden" id="itemCode5" name="itemCode5">
   					<input type="hidden" id="itemCode6" name="itemCode6">
   				</li>
   			</ul>,
   		</div>
   		<div class="mainDiv2">
   			<ul>
   				<li class="item_1"><a class="libg" style="background-position: 0 -321px;">选择类目</a></li>
   			</ul>
   		</div>
   		<div id="main_contents" class="main_contents tem1">
   			<div class="main_contents_div">
   				<div class="main_contents_div_left">
   					<div class="div_box">
   						<input id="item1" name="item1" class="div_box_input" onkeyup="_queryItem()" style="background-position: -44px -31px;" placeholder="请输入名称"/>
   					</div>
   					<div class="div_item">
   						<ul id="ulH">
   						</ul>
   					</div>
   				</div>
   				<div id="contents2" class="main_contents_div_left" style="display: none;">
   					<div class="div_box">
   						<input id="item2" name="item2" class="div_box_input" onkeyup="_cliItem('2')" style="background-position: -44px -31px;" placeholder="请输入名称"/>
   					</div>
   					<div class="div_item">
   						<ul id="ulH2">
   						</ul>
   					</div>
   				</div>
   				<div id="contents3" class="main_contents_div_left" style="display: none;">
   					<div class="div_box">
   						<input id="item3" name="item3" class="div_box_input" onkeyup="_cliItem('3')" style="background-position: -44px -31px;" placeholder="请输入名称"/>
   					</div>
   					<div class="div_item">
   						<ul id="ulH3">
   						</ul>
   					</div>
   				</div>
   				<div id="contents4" class="main_contents_div_left" style="display: none;">
   					<div class="div_box">
   						<input id="item4" name="item4" class="div_box_input" onkeyup="_cliItem('4')" style="background-position: -44px -31px;" placeholder="请输入名称"/>
   					</div>
   					<div class="div_item">
   						<ul id="ulH4">
   						</ul>
   					</div>
   				</div>
   				<div id="contents5" class="main_contents_div_left" style="display: none;">
   					<div class="div_box">
   						<input id="item5" name="item5" class="div_box_input" onkeyup="_cliItem('5')" style="background-position: -44px -31px;" placeholder="请输入名称"/>
   					</div>
   					<div class="div_item">
   						<ul id="ulH5">
   						</ul>
   					</div>
   				</div>
   				<div id="contents6" class="main_contents_div_left" style="display: none;">
   					<div class="div_box">
   						<input id="item6" name="item6" class="div_box_input" onkeyup="_cliItem('6')" style="background-position: -44px -31px;" placeholder="请输入名称"/>
   					</div>
   					<div class="div_item">
   						<ul id="ulH6">
   						</ul>
   					</div>
   				</div>
   			</div>
   		</div>
   		<div id="main_contents1" class="main_contents tem2" style="display: none;">
   			<div class="radioCss">
   				<p style="text-align: left;padding: 18px 50px 4px;">以下是系统匹配到的分类路径，如没有合适的分类，<a href="#" onclick="_backList()">请重新选择分类</a></p>
	   			<ul id="ulRadio" style="text-align: left;">
	   			</ul>
   			</div>
   		</div>
		<div class="sel_item_div tem1">
			<span style="font-weight: bold;padding-left: 5px;">您当前选择的是：</span>
			<input type="hidden" id="categoryName" class="categoryName"/>
			<span id="spanVal" class="categoryName">无</span>
		</div>
		<div class="tem1" style="margin-left: 13px; margin-top: -35px;">
			<div class="sel_item_div_s">&nbsp;</div>
		</div>
		<div class="subDiv">
			<div class="nextDiv">
				<button class="nextDiv_button" onclick="_nextPage()">下一步,填写商品信息</button>
			</div>
		</div>
   	</div>
  </div>
  </div>
  </body>
  	<script type="text/javascript">
		$(document).ready(function(){
			_reHeight("rightFrame","contentDiv");
		});
	</script>
</html>
